<!DOCTYPE html>
<html>
  <head>
    <title>Prisma example</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/tailwindcss/dist/tailwind.min.css"
    />
    <style type="text/css">
      .loader,
      .loader:after {
        border-radius: 50%;
        width: 10em;
        height: 10em;
      }
      .loader {
        top: 30px;
        right: 30px;
        font-size: 3px;
        position: fixed;
        text-indent: -9999em;
        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
        border-left: 1.1em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="py-24" style="background: rgb(12, 52, 75)">
      <div class="container mx-auto px-6">
        <h2 class="text-4xl font-bold mb-8 text-white">
          Prisma example
        </h2>
        <button
          onclick="getApi('')"
          class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
        >
          Check API status
        </button>
        <button
          onclick="getApi('seed')"
          class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
        >
          Seed data
        </button>
        <button
          onclick="getApi('feed')"
          class="fetch-button focus:outline-none bg-white font-bold rounded-full py-4 px-8 my-2 shadow-lg uppercase tracking-wider"
        >
          Load feed
        </button>
        <div class="loader invisible"></div>
      </div>
    </div>

    <div class="container mx-auto">
      <pre
        class="response-container text-white px-8 pt-6 pb-8 bg-black shadow-md invisible"
      ></pre>
    </div>

    <script>
      const responseContainer = document.querySelector('.response-container')
      const loader = document.querySelector('.loader')
      function renderResponse(res) {
        responseContainer.textContent = JSON.stringify(res, null, 2)
      }

      const getApi = endpoint => {
        loader.classList.remove('invisible')
        fetch(`/api/${endpoint}`)
          .then(function(response) {
            return response.json()
          })
          .then(function(response) {
            renderResponse(response)
            responseContainer.classList.remove('invisible')
            loader.classList.add('invisible')
          })
          .catch(function(err) {
            responseContainer.classList.remove('invisible')
            responseContainer.textContent = 'Error fetching'
          })
          .finally(function() {
            loader.classList.add('invisible')
          })
      }
    </script>
  </body>
</html>
